<script setup lang="ts">
import { useTradeAppOperationsPage } from "./tradeApp";

defineOptions({ name: "TradeAppOperations" });

const {
  // header
  searchValue,
  loading,
  searchIcon,
  refreshIcon,
  upgradeIcon,

  // table
  tableSize,
  filteredData,
  tableColumns,

  // actions
  handleRefresh,
  handleUpgradeAll
} = useTradeAppOperationsPage();
</script>

<template>
  <div>
    <div
      class="bg-bg_color mb-1 flex flex-col gap-2 p-1 sm:mb-2 sm:p-2 md:flex-row md:items-center md:justify-between md:p-3"
    >
      <el-input
        v-model="searchValue"
        placeholder="搜索交易APP..."
        clearable
        :prefix-icon="searchIcon"
        class="md:max-w-sm"
      />
      <div class="flex items-center gap-1 md:gap-2">
        <el-button
          type="primary"
          :size="tableSize"
          :loading="loading"
          :icon="refreshIcon"
          @click="handleRefresh"
          >刷新</el-button
        >
        <el-button
          :size="tableSize"
          :icon="upgradeIcon"
          @click="handleUpgradeAll"
          >升级所有</el-button
        >
      </div>
    </div>

    <div class="bg-bg_color mt-1 p-1 sm:mt-2 sm:p-2 md:p-3">
      <pure-table
        :size="tableSize"
        :data="filteredData"
        :loading="loading"
        :columns="tableColumns"
        row-key="trade_app_name"
        :border="true"
      />
    </div>
  </div>
</template>
